@CHARSET "UTF-8";

#header{
	width:100%;
	background-color: #ededed;/* #363636 */
	border-bottom: 2px solid #d6cec1;
	z-index: 1000;
}

#logo{
	width:auto;
	height:inherit;
	float:left;
}

	#logo a{
		width:auto;
		height:inherit;
	}
	
	#logo img{
		width:auto;
		height:auto;
		margin-top:9px;
	}
		
#nav{
	width:auto;
	height:inherit;
	float:left;
}

	#nav li{
		width:auto;
		height:inherit;
		float:left;
	}

	#nav a{
		width:98px;
		height:inherit;
		/* 使文字垂直居中 */
    	display:table-cell; 
		vertical-align:middle;
		/* 使文字水平居中  */
		text-align: center;
		font-size:14px;
		font-weight:normal;
		letter-spacing:.1em;
		color:rgba(5,22,42,.99);/* #57a4bf */
	}
		
		#nav a:visited{
			color:rgba(5,22,42,.99);
		}
	
		#nav a:hover{
			color: #0A90E8;
		}
		
.increase_opacity{
	animation:increase-opacity 0.8s ease-out normal;
	-webkit-animation:increase-opacity 0.8s ease-out normal;
}
		
#icon_box{
	width:auto;
	height:inherit;
	float:right;
	text-align: right;
	margin-right:30px;
}
	
	#icon_box span{
		display:inline-block;
		height:58px;
		line-height:58px;
		width:16px;
		margin-left:25px;
	}
		
		#icon_box .search{
			background: url("../res/imgs/search_icon.png") 0 21.3px no-repeat;
		}
			#icon_box .search:hover{
				background: url("../res/imgs/search_icon_hover.png") 0 21.3px no-repeat;
			}
			
		#icon_box .pc{
			background: url("../res/imgs/login_icon.png") 0 21px no-repeat;
		}
			#icon_box .pc:hover{
				background: url("../res/imgs/login_icon_hover.png") 0 21px no-repeat;
			}
				/* 个人中心二级菜单 */
				i.submenu_top{
					transform:rotate(45deg);
					-webkit-transform: rotate(45deg);
    				-moz-transform: rotate(45deg);
    				-ms-transform: rotate(45deg);
					display:none;
					width:15px;
					height:15px;
					top:50px;
					right:2px;
					background-color:#d6cec1;
				}
				.pc dl.submenu{
					display:none;
					width:120px;
					font-size:12px;
					top:58px;
					right:-20px;
					padding:10px 0;
					background-color:#d6cec1;
					z-index:1000;
					color:#363636;
				}
						.pc dl.submenu dd{
							text-align:left;
							height:35px;
							line-height:35px;
							padding-left:10px;
						}
						
							.pc dl.submenu dd:nth-child(1){
								padding-left:0;
							}
						
						.pc dl.submenu dd:hover{
							background-color:#9cd4ed;
						}
						
							.pc dl.submenu dd a{
								height:35px;
								line-height:35px;
								color:#363636;
							}
							
								.pc dl.submenu p#welcome_slogan{
									color:#363636;
									font-weight:bolder;
									text-align:center;
								}
							
								.pc dl.submenu dd a:hover{
									color:#fff;
								}
							
								/* 注册和登录按钮在二级菜单中居中 */
								.pc_first{
									width:52px;
									text-align:center;
								}
								#icon_box span.sep{
									display:inline-block;
									width:8px;
									padding:0;
									height:35px;
									line-height:35px;
									margin:0;
									text-align: center;
								}
								
								/* 个人中心 */
								i.grzx{
									background: url("../res/imgs/submenu_pc.png") -45px -1px no-repeat;
									display:inline-block;
									background-size:64px 64px;
									width:12px;
									height:12px;
									top:2px;
								}
								
								i.heart{
									background: url("../res/imgs/submenu_pc.png") -16px -48px no-repeat;
									display:inline-block;
									background-size:64px 64px;
									width:12px;
									height:12px;
									top:2px;
								}
								
								i.exit{
									background: url("../res/imgs/submenu_pc.png") -16px -1px no-repeat;
									display:inline-block;
									background-size:64px 64px;
									width:12px;
									height:12px;
									top:2px;
								}
								
								.pc_no_frist{
									margin-left:5px;
								}
		
		#search_box{
			display:none;
			height:58px;
			line-height:58px;
			width:1130px;
			float:right;
		}
		
			/* 搜索框的缩放动画效果 */
			.show_search_box_left{
				transform-origin:right center;
				-moz-transform-origin:right center;
				
				animation:show-search-box 0.8s ease normal;
				-webkit-animation:show-search-box 0.8s ease normal;
				-moz-animation:show-search-box 0.8s ease normal;
				-o-animation:show-search-box 0.8s ease normal;
			}
			
			.hide_search_box_left{
				transform-origin:right center;
				-moz-transform-origin:right center;
				
				animation:hide-search-box-left 0.8s ease-in normal;
				-webkit-animation:hide-search-box-left 0.8s ease-in normal;
				-moz-animation:hide-search-box-left 0.8s ease-in normal;
				-o-animation:hide-search-box-left 0.8s ease-in normal;
			}
			
			div#search_box_left.search_box_left{
				width:1110px;
				height:58px;
				line-height:58px;
			}
			
			input#search_bar.search_bar{
				width:1000px;
				height:38px;
				line-height:38px;
				text-indent: 1em;
				margin-left:10px;
				margin-top:10px;
				background-color:#dedede;
				color:#9cd4ed;
				border:0 none;
				outline:none;
				vertical-align: top;
			}
			
				input#search_bar.search_bar::-webkit-input-placeholder{
					color:#f7f6f4;
					font-size:12px;
					font-style:italic;
				}
				
		input#search_icon.search_icon{
			background:url("../res/imgs/search_icon.png") 0 0 no-repeat;
			display:inline-block;
			background-size:20px 20px;
			width:20px;
			height:20px;
			margin-top:19px;
			border:0 none;
		}
		
			input#search_icon.search_icon:hover{
				background:url("../res/imgs/search_icon_hover.png") 0 0 no-repeat;
				background-size:20px 20px;
				width:20px;
				height:20px;
				cursor: pointer;
			}
			
		i#close_icon.close_icon{
			background:url("../res/imgs/close_icon.png") 0 0 no-repeat;
			display:inline-block;
			background-size:20px 20px;
			width:20px;
			height:20px;
			top:19px;
			right:0;
		}
			
			/* 顺时针旋转close_icon */
			.rotate_close_icon{
				background:url("../res/imgs/close_icon.png") 0 0 no-repeat;
				background-size:20px 20px;
				width:20px;
				height:20px;
				top:19px;
				right:0;
				opacity:0;/*解决在图标旋转动画结束之后，图标又突然出现的问题*/
				
				animation:rotate-close-icon 0.8s linear normal;
				-webkit-animation:rotate-close-icon 0.8s linear normal;
				-moz-animation:rotate-close-icon 0.8s linear normal;
				-o-animation:rotate-close-icon 0.8s linear normal;
			}
			
			/* 逆时针旋转close_icon */
			.anti_rotate_close_icon{
				background:url("../res/imgs/close_icon.png") 0 0 no-repeat;
				background-size:20px 20px;
				width:20px;
				height:20px;
				top:19px;
				right:0;
				
				animation:anti-rotate-close-icon 0.8s linear normal;
				-webkit-animation:anti-rotate-close-icon 0.8s linear normal;
				-moz-animation:anto-rotate-close-icon 0.8s linear normal;
				-o-animation:anti-rotate-close-icon 0.8s linear normal;
			}
		
			i#close_icon.close_icon:hover{
				background:url("../res/imgs/close_icon_hover.png") 0 0 no-repeat;
				background-size:20px 20px;
				width:20px;
				height:20px;
				cursor: pointer;
			}
		
		#icon_box .icon{
			background-size:16px;
		}
		
			#icon_box .icon:hover{
				background-size:16px;
				cursor:pointer;
			}
			

/*动画效果*/
/* css3标准 */
@keyframes show-search-box{
	0%{
		opacity:0;
		transform:scale(0.1,1);
	}
	
	100%{
		opacity:1;
		transform:scale(1,1);
	}
}

@keyframes hide-search-box-left{
	0%{
		opacity:1;
		transform:scale(1,1);
	}
	
	100%{
		opacity:0;
		transform:scale(0.1,1);
	}
}

@keyframes increase-opacity{
	0%{
		opacity:0;
	}
	
	
	80%{
		opacity:0.5;
	}
	
	100%{
		opacity:1;
	}
}

@keyframes rotate-close-icon{
	0%{
		opacity:1;
		transform:rotate(0deg) scale(1,1);
	}
	
	100%{
		opacity:0;
		transform:rotate(360deg) scale(0.5,0.5);
	}
}

@keyframes anti-rotate-close-icon{
	0%{
		opacity:0;
		transform:rotate(0deg) scale(0.5,0.5);
	}
	
	100%{
		opacity:1;
		transform:rotate(-360deg) scale(1,1);
	}
}

/* 支持 Safari and Chrome */
@-webkit-keyframes show-search-box{
	0%{
		opacity:0;
		-webkit-transform:scale(0.1,1);
	}
	
	100%{
		opacity:1;
		-webkit-transform:scale(1,1);
	}
}

@-webkit-keyframes hide-search-box-left{
	0%{
		opacity:1;
		-webkit-transform:scale(1,1);
	}
	
	100%{
		opacity:0;
		-webkit-transform:scale(0.1,1);
	}
}

@-webkit-keyframes increase-opacity{
	0%{
		opacity:0;
	}
	
	100%{
		opacity:1;
	}
}

@-webkit-keyframes rotate-close-icon{
	0%{
		opacity:1;
		-webkit-transform:rotate(0deg) scale(1,1);
	}
	
	100%{
		opacity:0;
		-webkit-transform:rotate(360deg) scale(0.5,0.5);
	}
}

@-webkit-keyframes anti-rotate-close-icon{
	0%{
		opacity:0;
		-webkit-transform:rotate(0deg) scale(0,5,0.5);
	}
	
	100%{
		opacity:1;
		-webkit-transform:rotate(-360deg) scale(1,1);
	}
}

/* 支持Firefox */
@-moz-keyframes show-search-box{
	0%{
		opacity:0;
		-moz-transform:scale(0.1,1);
	}
	
	100%{
		opacity:1;
		-moz-transform:scale(1,1);
	}
}
/* 支持Opera */
@-o-keyframes show-search-box{
	0%{
		opacity:0;
		-o-transform:scale(0.1,1);
	}
	
	100%{
		opacity:1;
		-o-transform:scale(1,1);
	}
}